<template>
  <div>
    <div class="top">
      <el-page-header @back="goBack"></el-page-header>
    </div>
    <div class="center">
      <p class="p1">任务名称 <span class="mark">*</span>
        <el-input v-model="autoPatrolName" size="small" style="width: 500px;display: block;margin-top: 5px"></el-input>
      </p>
      <p class="p1">任务有效期 <span class="mark">*</span>
        <el-date-picker
            size="small"
            style="margin-top: 10px;width:500px;display: block;line-height: 20px"
            v-model="dateFn"
            type="daterange"
            clearable
            @change="getDate"
            format-value="yyyy-MMMM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </p>
      <p class="p1">分析任务 <span class="mark">*</span>
        <span style="display: block">
          <el-input placeholder="无需选择" v-model="input3" class="input-with-select" size="small"
                    style="margin-top: 10px;width: 500px">
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 150px" size="small">
            <el-option label="定时抓图任务" value="1"></el-option>
          </el-select>
        </el-input>
      </span>
      </p>

      <!--      <p class="p1">任务频次 <span class="mark">*</span>-->

      <!--        <el-radio-group v-model="radio" style="display: block;margin-top: 10px">-->
      <!--          <el-radio :label="1">日</el-radio>-->
      <!--          <el-radio :label="2">周</el-radio>-->
      <!--          <el-radio :label="3">月</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </p>-->
      <p class="p1">抓拍时间点 <span class="mark">*</span>
        <el-link style="margin-left: 20px;text-decoration: underline" @click="addTime"><i class="el-icon-plus"></i>添加时间点
        </el-link>
        <span style="display: block;display: flex;align-items: center" v-for="(item,index) in timeList">  <el-time-select
            :key="index"
            style="margin-top: 10px;width: 250px;display: block"
            size="small"
            v-model="item.timePoint"
            :picker-options="{
    start: '00:00',
    step: '00:05',
    end: '23:55'
  }"
            placeholder="选择时间">
        </el-time-select>
        <i class="el-icon-delete" style="margin-left: 5px" v-if="timeList.length>1"
           @click="removeTime(index)"></i></span>
      </p>
      <p class="p1">关联任务
        <span class="mark">*</span>
        <span style="display: block;margin-top: 5px">
          <el-input v-model="province" placeholder="省份" size="small" style="width: 120px"
                    @keyup.enter.native="getStore"></el-input>
        <el-input v-model="storeName" placeholder="请搜索任务名称" size="small"
                  style="width: 365px;margin-left: 15px" @keyup.enter.native="getStore"></el-input>
       </span>
      </p>
      <p class="p1">
        <el-transfer :titles="['任务名称', '关联任务']" v-model="transfer" :data="transferData" :props="{
      key: 'key',
      label: 'label'
    }" @left-check-change="handleSelectChange" @right-check-change="getTransferData"></el-transfer>
      </p>
    </div>
    <div>
      <el-button @click="_submit" size="small" style="background-color:#303e9d;color: #eeeeee;border: 1px solid #303e9d">确认提交</el-button>
      <el-button @click="goBack" size="small">返回上一页</el-button>

    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";

export default {
  name: "addAutoPic",
  data() {
    return {
      dateFn: "",
      storeName: "",
      transfer: [],
      assignTaskIds: [],
      timePoint: "",
      startTime: "",
      province: "",
      endTime: "",
      select: "1",
      radio: 1,
      input3: "",
      autoPatrolName: "",
      transferData: [],
      timeList: [
        {
          timePoint: "00:00"
        }
      ]
    }
  },
  watch: {
    '$route.query': {
      handler(newQuery) {
        this.fetchUser(newQuery)
      },
      immediate: true
    }
  },
  methods: {
    fetchUser(val) {
      if (!val.state) return
      this.autoPatrolName = ''
      this.endTime = ''
      this.startTime = ''
      this.dateFn = ''
      this.timeList = this.$options.data().timeList
      this.transfer = this.$options.data().transfer
      this.getStore()
    },
    handleSelectChange(selectedKeys, direction) {
      this.transfer = Array.from(new Set([...this.transfer, ...selectedKeys]))
    },
    getTransferData(val) {
      this.assignTaskIds = val
    },
    getStore() {
      const data = {
        province: this.province,
        assignTaskName: this.storeName
      }
      this.$api.inspectionTaskGetAllAssignTaskList(data).then(res => {
        res.map(el => {
          el.label = el.assignTaskName
          el.key = el.assignTaskId
        })
        this.transferData = res
      })
    },
    goBack() {
      this.$router.back()
    },
    getDate(val) {
      if (val) {
        this.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.startTime = ''
        this.endTime = ''
      }
    },
    addTime() {
      this.timeList.push({timePoint: '00:00'});
    },
    removeTime(index) {
      this.timeList.splice(index, 1);
    },
    _submit() {
      if (!this.autoPatrolName) return this.$message.warning('请输入任务名称！')
      if (!this.startTime) return this.$message.warning('请选择任务有效期！')
      if (this.assignTaskIds.length == 0) return this.$message.warning('请勾选关联任务！')
      const data = {
        inspectionTaskName: this.autoPatrolName,
        inspectionTaskStartTime: this.startTime,
        inspectionTaskEndTime: this.endTime,
        inspectionTaskTime: this.timeList.map(item => item.timePoint),
        assignTaskIds: this.assignTaskIds
      }
      this.$api.inspectionTaskAddInspectionTask(data).then(res => {
        if (res == 1) {
          this.$message.success('提交成功！')
          this.goBack()
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #303e9d;
  background: #303e9d;
}

/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #303e9d;
}

.center {
  padding: 20px;

  .p1 {
    margin-top: 20px;
  }

  .mark {
    color: #ce0e0f;
  }
}
</style>